import { useState, useEffect } from 'react';

const UseLocalStorage = () => {
  const [ word, setWord ] = useState('');

  // 自定义一个钩子函数，作用是改变的时候同时保存到localStorage
  // 必须以use开头
  // 参数： key， value就是设置的值， defaultValue就是默认值，可以为空
  function useLocalStorage(key, defaultValue) {
    // 从localStorage取出原来存储的值
    let initValue = localStorage[key];
    // 如果没有设置过，就是用默认值
    initValue = initValue === undefined ? defaultValue : initValue;

    const [ content, setContent ] = useState(typeof defaultValue === 'number' ?  +initValue : initValue); 
    useEffect(()=>{
      localStorage.setItem(key, content); // 存储到localStorage
    }, [ content ]); // 监听content变化，content一改变，就更改localStorage的值

    return [ content, setContent ];
  }

  // 变量在界面更新的同时存储到localStorage
  const [ num, setNum ] = useLocalStorage('num', 100);
  // const [ num, setNum ] = useState(100);
  const [ name, setName ] = useLocalStorage('username', '朱小明');

  return (
    <div>
      <div>自定义hook</div>
      <div>num = {num}</div>
      <div><button onClick={()=>{ setNum(num+1) }}>num++</button></div>
      <hr />
      <div>name = {name}</div>
      <input type="text" value={word} onInput={ e=>setWord(e.target.value) } />
      <div><button onClick={()=>{ setName(word) }}>设置名字</button></div>
    </div>
  )
}
export default UseLocalStorage